<template>
    <view class="container">
        <view class="container__bar bgc-ffffff py-20">
            <uv-tabs :list="[{name:'全部'},{name:'未学习'},{name:'学习中'},{name:'已学完'},{name:'未支付'}]"
                :activeStyle="{color:'#6e64c2',padding:'10rpx 20rpx',fontWeight:'bold'}" lineColor="#6e64c2"
                :itemStyle="{height:'auto',padding:'0'} " :inactiveStyle="{padding:'10rpx 20rpx',color:'#666a74'}"
                :scrollable="false"></uv-tabs>
        </view>
        <view class="container__list p-30">
            <view class="py-150 container__empty" v-if="data.length==0">
                <uv-empty icon="/static/logo.png" text="暂无内容" textColor="#adabc2" textSize="16">
                    <view class="fs-24 c-777777 mt-35 mb-90">快去挑选感兴趣的内容，开始学习！</view>
                    <view class="flex justify-center">
                        <uv-button text="去学习" color="#7f72e4"
                            :customStyle="{borderRadius:'20rpx',width:'190rpx'}"></uv-button>
                    </view>
                </uv-empty>
            </view>
            <view class="list bgc-ffffff p-20 rounded-10 mb-20" v-for="i in 5">
                <view class="flex justify-between items-center pb-20">
                    <view class="c-888888 fs-24 list__title">订单编号：20251355210</view>
                    <view class="fs-26 list__status list__status--nopay">未支付</view>
                    <view class="fs-26 list__status list__status--pay">已完成</view>
                    <view class="fs-26 list__status list__status--study">学习中</view>
                </view>
                <view class="flex justify-between border-t border-b px-10 py-20">
                    <view class="w-140">
                        <uv-image src="/static/logo.png" width="70" height="70" radius="3" mode=""></uv-image>
                    </view>
                    <view class="ml-20 flex flex-col justify-between">
                        <view class="list__title fs-32">
                            2025年心理咨询行业趋势数字化个性化与全民心理健康意识的崛起
                        </view>
                        <view class="fs-22 c-999999 list__author">讲师：中世界·共45节</view>
                    </view>
                </view>
                <view class="flex justify-between items-center pt-20">
                    <view class="fs-26 list__info">待支付￥29.9</view>
                    <view class="flex list__btn">
                        <view class="list__btn--nopay flex">
                            <uv-button text="删除" size="small" color="#7f72e4" :plain="true" shape="circle"></uv-button>
                            <view class="w-20"></view>
                            <uv-button text="去支付" size="small" color="#7f72e4" shape="circle"></uv-button>
                        </view>
                        <view class="list__btn--pay">
                            <uv-button text="重新学习" size="small" color="#7f72e4" shape="circle"></uv-button>
                        </view>
                        <view class="list__btn--study">
                            <uv-button text="去学习" size="small" color="#7f72e4" shape="circle"></uv-button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
    import {
        ref
    } from "vue";
    const data = ref([{
        id: 1
    }])
</script>
<style scoped lang="scss">
    .container {
        background-color: #f3f5fd;
        min-height: 100vh;
    }

    .list {
        &__status {
            &--nopay {
                color: #e62758;
            }

            &--study {
                color: #8073e4;
            }

            &--nostudy {
                color: #8073e4;
            }
        }
    }
</style>